<template>
  <div class="typeChartPage">
    <div ref="typeChart" class="typeChart" />
  </div>
</template>

<script>
import ChartOption from './module.js'
export default {
  props: {
    classifyData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      chart: new ChartOption('typeChart')
    }
  },
  watch: {
    classifyData: {
      handler (nVal, oVal) {
        this.setOptions(this.chart.chart, nVal)
      },
      deep: true
    }
  },
  mounted  () {
    this.initChart(this.chart)
  },
  methods: {
    initChart (chartObj) {
      chartObj.chart = this.$echarts.init(this.$refs[chartObj.name])
      this.setOptions(chartObj.chart, this.classifyData)
    },
    // 销售类别分布
    setOptions (chart, data) {
      chart.setOption({
        title: {
          text: '销售类别分布'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: ['#3AA0FF', '#35CACA', '#FAD337', '#F1627B', '#965DE4'],
        legend: {
          orient: 'vertical',
          right: 10,
          top: 20,
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            labelLine: {
              normal: {
                length: 20,
                length2: 70,
                lineStyle: {
                  color: '#333'
                }
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -70],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data: data || [{
              classifyId: 0,
              name: '无',
              value: 0
            }]
          }
        ]
      })
    },
  }
}
</script>

<style scoped lang="scss">
.typeChartPage{
  width: 100%;
  height: 100%;
  .typeChart{
    width: 100%;
    height: 100%;
  }
}
</style>
